<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码邮件</title>
    <style>
        /* 基础样式重置 */
        body, table, td, p, a {
            font-family: Arial, Helvetica, sans-serif, 'Microsoft YaHei';
            line-height: 1.5;
        }

        /* 主要容器 */
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
        }

        /* 头部样式 */
        .email-header {
            background: linear-gradient(135deg, #3498db, #8e44ad);
            padding: 30px 20px;
            text-align: center;
            color: white;
        }

        .logo {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        /* 内容区域 */
        .email-content {
            padding: 30px;
            color: #444444;
        }

        /* 验证码显示 */
        .verification-code {
            font-size: 42px;
            font-weight: bold;
            letter-spacing: 10px;
            text-align: center;
            margin: 30px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            color: #e74c3c;
            border: 2px dashed #e0e0e0;
        }

        /* 提示信息 */
        .instructions {
            background-color: #f1f8ff;
            border-left: 4px solid #3498db;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }

        /* 按钮样式 */
        .action-button {
            display: block;
            width: 200px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white !important;
            text-align: center;
            padding: 15px 0;
            margin: 30px auto;
            text-decoration: none;
            font-weight: bold;
            border-radius: 30px;
            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .action-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
            background: linear-gradient(135deg, #2980b9, #3498db);
        }

        /* 页脚样式 */
        .email-footer {
            padding: 20px;
            text-align: center;
            background-color: #f5f7fa;
            color: #777777;
            font-size: 13px;
        }

        /* 响应式调整 */
        @media screen and (max-width: 600px) {
            .email-content {
                padding: 20px;
            }

            .verification-code {
                font-size: 32px;
                padding: 15px;
            }

            .action-button {
                width: 100%;
                max-width: 200px;
            }
        }
    </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f5f7fa;">
<table class="email-container" width="100%" border="0" cellspacing="0" cellpadding="0">
    <!-- 头部 -->
    <tr>
        <td class="email-header">
            <div class="logo">Gude</div>
            <h1 style="margin: 10px 0; font-size: 24px;">您的验证码</h1>
        </td>
    </tr>

    <!-- 内容区域 -->
    <tr>
        <td class="email-content">
            <p>尊敬的 <strong th:text="${username}"></strong>，您好：</p>

            <p>您正在进行账户账号注册验证操作，本次请求的验证码为：</p>

            <div class="verification-code" th:text="${verificationCode}">
            </div>

            <p>该验证码 <span style="color: #e74c3c; font-weight: bold;">10分钟内</span> 有效，请尽快完成验证。</p>

            <div class="instructions">
                <p><strong>安全提示：</strong></p>
                <ul>
                    <li>请勿向任何人泄露此验证码</li>
                    <li>如非本人操作，请忽略此邮件</li>
                </ul>
            </div>

        </td>
    </tr>

</table>
</body>
</html>